<!--
 * @Description: 商品明细弹窗
-->
<template>
  <a-drawer title="商品明细" :open="visible" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>

    <a-card size="small" :bordered="false" :hoverable="true" class="query-table-wrapper">
      <!---------- 表格操作行 begin ----------->
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block">
          <a-button @click="onExport" type="primary" v-privilege="'	export:goods:statistics'">
            <template #icon>
              <ExportOutlined />
            </template>
            导出
          </a-button>
        </div>
        <div class="smart-table-setting-block">
          <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.ERP.GOODS" :refresh="queryData" />
        </div>
      </a-row>
      <!---------- 表格操作行 end ----------->
      <div class="table-wrapper">
        <a-table
          size="small"
          :dataSource="tableData"
          :columns="columns"
          rowKey="goods_id"
          bordered
          :scroll="{ x: 'max-content' }"
          :pagination="false"
          :showSorterTooltip="false"
          :loading="tableLoading"
          :row-selection="{
            selectedRowKeys: selectedRowKeyList,
            onChange: onSelectChange
          }"
        >
          <template #bodyCell="{ text, record, column }">
            <template v-if="column.dataIndex === 'charge_type'">
              {{ text == 1 ? '货值' : '计件' }}
            </template>
          </template>
          <template #summary>
            <a-table-summary-row fixed>
              <a-table-summary-cell :index="0">总计</a-table-summary-cell>
              <a-table-summary-cell />
              <a-table-summary-cell />
              <a-table-summary-cell />
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ sumData.grand_total_goods_num }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell />
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ sumData.grand_total_agree_amount }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ sumData.grand_total_outbount_goods_num }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ Number(sumData.grand_total_outbount_agree_amount || 0) }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ Number(sumData.grand_total_tongcang_goods_num || 0) }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ Number(sumData.grand_total_tongcang_agree_amount || 0) }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ Number(sumData.grand_total_cangpei_goods_num || 0) }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ Number(sumData.grand_total_cangpei_agree_amount || 0) }}</a-typography-text></a-table-summary-cell
              >
              <a-table-summary-cell
                ><a-typography-text type="danger">{{ Number(sumData.grand_total_service_fee || 0) }}</a-typography-text></a-table-summary-cell
              >
            </a-table-summary-row>
          </template>
        </a-table>
      </div>

      <div class="smart-query-table-page query-table-page">
        <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
      </div>
    </a-card>
  </a-drawer>
</template>
<script setup lang="ts">
import { outboundApi } from '@/api/business/report/goods-api'
import TableOperator from '@/components/support/table-operator/index.vue'
import { useQuery } from '@/hooks/web/use-query-hook'
import { PAGE_SIZE_OPTIONS } from '@/constants/system/common-const'
import { TABLE_ID_CONST } from '@/constants/support/table-id-const'

defineExpose({
  showDrawer
})
// 是否展示抽屉
const visible = ref(false)
const ids = ref()
function showDrawer(item) {
  ids.value = item.ids
  queryData()
  visible.value = true
}

function onClose() {
  visible.value = false
}

// ---------------------------- 表格列 ----------------------------

const columns = computed(() => [
  {
    title: '商品名称',
    dataIndex: 'goods_name'
  },
  {
    title: '规格',
    dataIndex: ['goods_spec', 'spec_name']
  },
  {
    title: '计费类型',
    dataIndex: 'charge_type'
  },
  {
    title: '商品数量',
    dataIndex: 'total_base_num'
  },
  {
    title: '单位',
    dataIndex: ['goods_spec', 'unit_name']
  },
  {
    title: '商品货值',
    dataIndex: 'total_agree_amount'
  },
  {
    title: '出库数量',
    dataIndex: 'total_outbound_base_num'
  },
  {
    title: '出库货值',
    dataIndex: 'total_outbount_agree_amount'
  },
  {
    title: '统仓出库数量',
    dataIndex: 'total_tongcang_base_num'
  },
  {
    title: '统仓出库货值',
    dataIndex: 'total_tongcang_agree_amount'
  },
  {
    title: '仓配出库数量',
    dataIndex: 'total_cangpei_base_num'
  },
  {
    title: '仓库出库货值',
    dataIndex: 'total_cangpei_agree_amount'
  },
  {
    title: '服务费',
    dataIndex: 'total_service_fee'
  }
])

// ---------------------------- 查询数据表单和方法 ----------------------------
const sumData = ref({
  grand_total_goods_num: 0,
  grand_total_agree_amount: 0,
  grand_total_outbount_goods_num: 0,
  grand_total_outbount_agree_amount: 0,
  grand_total_tongcang_goods_num: 0,
  grand_total_tongcang_agree_amount: 0,
  grand_total_cangpei_goods_num: 0,
  grand_total_cangpei_agree_amount: 0,
  grand_total_service_fee: 0
})
const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData, deleteData } = useQuery({
  fetchDataApi: async (params) => {
    const data = {
      ...params,
      ids: ids.value
    }
    const res = await outboundApi.outboundGoodsList(data)
    sumData.value = res.data?.total_data
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {},
  queryFormOp: {}
})

// 选择表格行
const selectedRowKeyList = ref<number[]>([])

function onSelectChange(selectedRowKeys: number[]) {
  selectedRowKeyList.value = selectedRowKeys
}
// ------------------------------- 导出和导入 ---------------------------------
// 导出
function onExport() {
  const data = {
    ids: ids.value
  }
  outboundApi.exportOutboundGoods(data)
}
</script>
